<template>
  <div class="kaoshi">
    <el-row style="height: 10px;padding-top: 10px">


    </el-row>
    <el-row>

      本场考试: {{sessionText}} ,考试时间: {{session.examDate}}

    </el-row>
    <el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="top">
<!--        <el-form-item label="报名职业/等级" prop="vocation">-->
<!--          <el-cascader v-model="form.vocation"-->
<!--                       :options="vocationList"-->
<!--                       :props="{ label: 'text' }" @change="handleChangeTree" ref="vocationSelect" style="width: 100%">-->
<!--          </el-cascader>-->
<!--        </el-form-item>-->
        <el-form-item label="文化程度" prop="degree">
          <el-select v-model="form.degree" placeholder="请选择" style="width: 100%">
            <el-option label="博士研究生" value="博士研究生"></el-option>
            <el-option label="硕士研究生" value="硕士研究生"></el-option>
            <el-option label="大学本科" value="大学本科"></el-option>
            <el-option label="大学专科" value="大学专科"></el-option>
            <el-option label="中等专科" value="中等专科"></el-option>
            <el-option label="职业高中" value="职业高中"></el-option>
            <el-option label="技工学校(技师班、中级工班、高级工班)"
                       value="技工学校(技师班、中级工班、高级工班)"></el-option>
            <el-option label="高中" value="高中"></el-option>
            <el-option label="初中" value="初中"></el-option>
            <el-option label="小学" value="小学"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>

        </el-form-item>


        <el-form-item label="最高学历毕业院校" prop="school">
          <div>注：按毕业证书或学信网显示的名称全称进行填写</div>
          <el-input v-model="form.school" placeholder="请输入专业" maxlength="15"/>
        </el-form-item>


        <el-form-item label="专业名称" prop="major">
          <div>注：按毕业证书或学信网显示的专业名称全称进行填写</div>
          <el-input v-model="form.major" placeholder="请输入专业" maxlength="15"/>
        </el-form-item>


        <el-form-item label="工作单位" prop="company">
          <div>注：与个人社保权益单上工作单位一致</div>
          <el-input v-model="form.company" placeholder="请输入工作单位" maxlength="30"/>
        </el-form-item>

        <!--        <el-form-item label="工作时间" prop="workDate">-->
        <!--          <el-date-picker-->
        <!--            v-model="form.workDate"-->
        <!--            type="month"-->
        <!--            clearable-->
        <!--            :editable="false"-->
        <!--            value-format="yyyy-MM"-->
        <!--            placeholder="选择开始日期"-->
        <!--            style="width: 100%"-->
        <!--          >-->
        <!--          </el-date-picker>-->
        <!--        </el-form-item>-->

        <el-form-item label="职业年限" prop="seniority">
          <div>注：以第一份工作时间开始计算</div>
          <el-input v-model="form.seniority" placeholder="请输入职业年限" maxlength="2"/>
        </el-form-item>

        <el-divider></el-divider>
        <el-form-item label="考生报名登记表" prop="register">
          <ImageUpload :limit="1" v-model="form.register" :fileSize="10"
                       :fileType="['png', 'jpg', 'jpeg']" :data="{name:'register'}"></ImageUpload>
          <!--          <ImageUpload :limit="1"  v-model="form.idPhoto"></ImageUpload>-->
        </el-form-item>


        <el-divider></el-divider>
        <el-form-item prop="idPhoto">
          <template slot="label">
            <span>证件照</span> <span class="note" @click="showDemo('zhengjianzhao.jpg')"> <i
            class="el-icon-warning"></i> 示例</span>
          </template>

          <div>注：<span style="color: red">白底</span>，不戴帽子，头部占照片的2/3，面部清晰可见两耳及喉结位置</div>
          <ImageUpload :limit="1" v-model="form.idPhoto" :fileSize="10"
                       :fileType="['png', 'jpg', 'jpeg']"></ImageUpload>
          <!--          <ImageUpload :limit="1"  v-model="form.idPhoto"></ImageUpload>-->
        </el-form-item>
        <el-divider></el-divider>

        <el-form-item prop="cardFront">
          <template slot="label">
            <span>身份证（人像面）</span> <span class="note" @click="showDemo('zheng.png')"> <i
            class="el-icon-warning"></i> 示例</span>
          </template>

          <div>注：身份证照片需包含完整边框（实测边框宽度需≥2mm）</div>
          <ImageUpload :limit="1" v-model="form.cardFront" :fileSize="10"
                       :fileType="['png', 'jpg', 'jpeg']"></ImageUpload>
          <!--          <ImageUpload :limit="1"  v-model="form.cardFront"></ImageUpload>-->
        </el-form-item>

        <el-form-item prop="cardBack">
          <template slot="label">
            <span>身份证（国徽面）</span> <span class="note" @click="showDemo('fan.png')"> <i class="el-icon-warning"></i> 示例</span>
          </template>
          <!--          <div>说明</div>-->
          <!--          <FileUpload :limit="1" v-model="form.cardBack" :fileSize="10" :fileType="['png', 'jpg', 'jpeg']"></FileUpload>-->
          <ImageUpload :limit="1" v-model="form.cardBack" :fileSize="10"
                       :fileType="['png', 'jpg', 'jpeg']"></ImageUpload>
        </el-form-item>

        <el-divider></el-divider>

        <el-form-item label="是否2000年后毕业" prop="eduFlag">
          <el-radio-group v-model="form.eduFlag">
            <el-radio :label="'Y'">是</el-radio>
            <el-radio :label="'N'">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="学历证书电子注册备案表" prop="education" v-if="form.eduFlag==='Y'">
          <div>注：请至<a href="https://www.chsi.com.cn/xlcx/index.jsp" target="_blank"
                         style="color: blue; text-decoration: underline;">中国高等教育学生信息网(学信网)</a>下载源文件，有效期6个月以内
          </div>
          <FileUpload :limit="1" v-model="form.education" :fileSize="10" :fileType="['pdf']"></FileUpload>
        </el-form-item>

        <el-form-item label="毕业证书" prop="graduation" v-if="form.eduFlag==='N'">
          <ImageUpload :limit="1" v-model="form.graduation" :fileSize="10"
                       :fileType="['png', 'jpg', 'jpeg']"></ImageUpload>
          <!--          <ImageUpload :limit="1"  v-model="form.graduation"></ImageUpload>-->
        </el-form-item>

        <el-form-item label="学历承诺书" prop="graduateCommit" v-if="form.eduFlag==='N'">
          <ImageUpload :limit="1" v-model="form.graduateCommit" :fileSize="10"
                       :fileType="['png', 'jpg', 'jpeg']"></ImageUpload>
          <!--          <ImageUpload :limit="1"  v-model="form.graduation"></ImageUpload>-->
        </el-form-item>


        <el-divider></el-divider>
        <el-form-item label="考证记录" prop="record">
          <div>注：最多上传3张照片，请保持照片文字清晰可见</div>
          <ImageUpload :limit="3" v-model="form.record" :fileSize="10" :fileType="['png', 'jpg', 'jpeg']"></ImageUpload>
          <!--          <ImageUpload :limit="3"  v-model="form.record"></ImageUpload>-->
        </el-form-item>


        <el-divider></el-divider>
        <!--        <el-form-item label="工龄报名" prop="seniorityFlag">-->
        <!--          <el-radio-group v-model="form.seniorityFlag">-->
        <!--            <el-radio :label="'N'">否</el-radio>-->
        <!--            <el-radio :label="'Y'">是</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->


        <el-form-item label="养老保险权益记录单" prop="social">
          <div>注：最多上传5张照片，请保持照片文字清晰可见，需要<span v-if="form.seniorityFlag==='Y'">120</span><span
            v-else>12</span>个月以上
          </div>
          <ImageUpload :limit="5" v-model="form.social" :fileSize="10" :fileType="['png', 'jpg', 'jpeg']"></ImageUpload>
          <!--          <ImageUpload :limit="5"  v-model="form.social"></ImageUpload>-->
        </el-form-item>

        <el-form-item label="工作年限承诺书" prop="commitment" v-if="form.seniorityFlag==='Y'">
          <div>注：请保持照片文字清晰可见</div>
          <ImageUpload :limit="1" v-model="form.commitment" :fileSize="10"
                       :fileType="['png', 'jpg', 'jpeg']"></ImageUpload>
          <!--          <ImageUpload :limit="5"  v-model="form.social"></ImageUpload>-->
        </el-form-item>

        <el-form-item label="工作证明" prop="prove" v-if="form.seniorityFlag==='Y'">
          <div>注：请保持照片文字清晰可见</div>
          <ImageUpload :limit="1" v-model="form.prove" :fileSize="10"
                       :fileType="['png', 'jpg', 'jpeg']"></ImageUpload>
          <!--          <ImageUpload :limit="5"  v-model="form.social"></ImageUpload>-->
        </el-form-item>

        <!--        <el-form-item label="工作履历" name="form.resumeList" v-if="form.seniorityFlag==='Y'">-->
        <!--          <el-row v-for="(resume,index) in form.resumeList" :key="resume.key">-->
        <!--            <el-row>-->
        <!--              <el-col :span="4">序号{{ index + 1 }}</el-col>-->
        <!--              <el-col :span="11">{{ resume.startDate }}~{{ resume.endDate }}</el-col>-->
        <!--              <el-col :span="9">{{ resume.post }}</el-col>-->
        <!--            </el-row>-->
        <!--            <el-row>-->
        <!--              <el-col :span="15">{{ resume.company }}</el-col>-->
        <!--              <el-col :span="9">-->
        <!--                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateRow(resume)">修改</el-button>-->
        <!--                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteRow(resume.key)">删除-->
        <!--                </el-button>-->
        <!--              </el-col>-->
        <!--            </el-row>-->
        <!--          </el-row>-->
        <!--          <el-row>-->
        <!--            <el-button @click="handleAddResume">添加履历</el-button>-->
        <!--          </el-row>-->
        <!--        </el-form-item>-->


        <el-divider></el-divider>
        <el-form-item style="text-align:center">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="handleBack">返 回</el-button>
        </el-form-item>

      </el-form>

    </el-row>

    <el-dialog
      :visible.sync="resumeOpen"
      title="添加工作履历"
      width="100%"
      height="60%"
      append-to-body>

      <el-form ref="resumeForm" :model="resumeForm" :rules="resumeRules" label-width="120px" label-position="top">
        <el-row>
          <el-col :span="24">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker
                v-model="resumeForm.startDate"
                type="month"
                clearable
                :editable="false"
                value-format="yyyy-MM"
                placeholder="选择开始日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>


          <el-col :span="24">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker
                @focus="handleFocus"
                v-model="resumeForm.endDate"
                type="month"
                :editable="false"
                clearable
                value-format="yyyy-MM"
                placeholder="选择结束日期"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="岗位" prop="post">
              <el-input v-model="resumeForm.post" placeholder="请输入岗位" maxlength="8"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="公司" prop="company">
              <el-input v-model="resumeForm.company" placeholder="请输入公司" maxlength="20"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitResumeForm">确 定</el-button>
        <el-button @click="cancelResume">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="demoOpen"
               title="示例"
               width="80%"
               height="80%"
               append-to-body>
      <img :src="getImageUrl()" style="display: block; max-width: 100%; margin: 0 auto"/>
      <!--      <img src="@/assets/images/zhengjianzhao.jpg">-->
    </el-dialog>


  </div>


</template>

<script>
import {initInfo, addExam} from "@/api/h5"
import {MessageBox,} from 'element-ui'

export default {
  name: "ExamSession",

  data() {
    return {
      data: {
        session: '',
        id: ''
      },
      session:{},
      sessionText:'',
      // 表单参数
      form: {
        idPhoto: "",
        eduFlag: 'Y',
        seniorityFlag: 'N',
        resumeList: []
      },
      demoImg: undefined,
      demoOpen: false,
      // 表单校验
      rules: {
        major: [
          {required: true, message: "请填写专业", trigger: "blur"}
        ],
        school: [
          {required: true, message: "请填写毕业院校", trigger: "blur"}
        ],
        register: [
          {required: true, message: "请上传登记表", trigger: "blur"}
        ],
        graduateCommit: [
          {required: true, message: "请上传学历承诺书", trigger: "blur"}
        ],
        commitment: [
          {required: true, message: "请上传工作年限承若书", trigger: "blur"}
        ],
        prove: [
          {required: true, message: "请上传工作证明", trigger: "blur"}
        ],
        company: [
          {required: true, message: "请填写工作单位", trigger: "blur"}
        ],
        vocation: [
          {required: true, message: "请选择报名职业/等级", trigger: "blur"}
        ],
        idPhoto: [
          {required: true, message: "请上传证件照", trigger: "blur"}
        ],
        cardFront: [
          {required: true, message: "请上传身份证人像面", trigger: "blur"}
        ],
        cardBack: [
          {required: true, message: "请上传身份证国徽面", trigger: "blur"}
        ],
        graduation: [
          {required: true, message: "请上传毕业证", trigger: "blur"}
        ],
        // record: [
        //   {required: true, message: "请上传考证记录", trigger: "blur"}
        // ],
        social: [
          {required: true, message: "请上传社保权益", trigger: "blur"}
        ],
        degree: [
          {required: true, message: "请填写文化程度", trigger: "blur"}
        ],
        // major: [
        //   {required: true, message: "请填写专业", trigger: "blur"}
        // ],
        seniority: [
          {required: true, message: "请填写职业年限", trigger: "blur"},
          {
            pattern: /^\+?[1-9][0-9]*$/,
            message: "请输入正确的职业年限",
            trigger: "blur"
          }
        ],
        workDate: [
          {required: true, message: "请选择工作时间", trigger: "blur"}
        ],
      },
      vocationList: [],
      resumeOpen: false,
      resumeRules: [],
      resumeForm: {}
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        console.log(route)
        this.form.seniorityFlag = route.query && route.query.seniorityFlag
        this.data.session = route.query && route.query.session
      },
      immediate: true
    },
    form: {
      handler(newVal) {
        this.$cache.local.set('exam_info_' + this.data.id, JSON.stringify(newVal))
        console.log(newVal);
      },
      deep: true // 启用深度监视
    }
  },
  mounted() {
    // document.querySelector('.login').style.touchAction = 'pan-y';
    // document.addEventListener('touchmove', function(event) {
    //   event.preventDefault(); // 阻止默认的触摸移动行为
    // }, { passive: false });
  },
  created() {
    this.handleInitInfo()
    // if( this.form.seniorityFlag ==='N'){
    //
    //   this.$set(this.rules, 'major', [
    //     {required: true, message: "请填写专业", trigger: "blur"}
    //   ]);
    //
    //   this.$set(this.rules, 'school', [
    //     {required: true, message: "请填写毕业院校", trigger: "blur"}
    //   ]);
    // }
  },
  methods: {
    getImageUrl() {
      if (this.demoImg) {
        return require(`@/assets/images/` + this.demoImg);
      }
    },
    showDemo(type) {
      this.demoImg = type
      this.demoOpen = true
    },
    handleUpdateRow(row) {
      this.resumeForm = row
      this.resumeOpen = true
    },
    handleDeleteRow(key) {
      this.form.resumeList = this.form.resumeList.filter(item => item.key !== key)
    },
    handleFocus(event) {
      event.target.blur(); // 当聚焦时，立即失去焦点
    },
    handleInitInfo() {
      initInfo(this.data.session).then(res => {
        if (res.data !== 'error') {
          this.data.id = res.session.sessionId
          const f = this.$cache.local.get('exam_info_' + this.data.id)

          if (f) {
            console.log(111111111)
            this.form = JSON.parse(f)
          }
          this.session = res.session
          this.sessionText = res.sessionText
          this.form.sessionId = res.session.sessionId
          this.form.refereeId = res.refereeId
          this.form.channel = res.channel


        } else {
          MessageBox.confirm('二维码已过期！请重新扫描', '安全提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
            closeOnClickModal: false,
            showClose: false,
            type: 'warning'
          }).then(() => {
            // this.$router.
            // router.push({ name: 'UserInfo', params: { activeTab: 'resetPwd' } })
            // this.$router.push({path: "/kaoshi/userInfo/add"}).catch(() => {})
          }).catch(() => {
          })
        }
      }).catch(res => {
        MessageBox.confirm('二维码已过期！请重新扫描', '安全提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          closeOnClickModal: false,
          showClose: false,
          type: 'warning'
        }).then(() => {
          // this.$router.
          // router.push({ name: 'UserInfo', params: { activeTab: 'resetPwd' } })
          // this.$router.push({path: "/kaoshi/userInfo/add"}).catch(() => {})
        }).catch(() => {
        })
      })
    },

    handleChangeTree(value) {
      this.form.vocation = value[1]
      this.form.vocationText = ''
      if (this.$refs.vocationSelect.getCheckedNodes()[0]) {
        const data = this.$refs.vocationSelect.getCheckedNodes()[0].pathLabels
        data.forEach(item => {
          this.form.vocationText = this.form.vocationText + item + "/"
        })
      }
      console.log(this.form.vocationText)

    },
    submitResumeForm() {
      if (this.resumeForm.key) {
        this.form.resumeList.forEach(item => {
          if (item.key === this.resumeForm.key) {
            item = this.resumeForm
          }
        })
      } else {
        this.resumeForm.key = Math.random()
        this.form.resumeList.push(this.resumeForm);
      }
      this.resumeOpen = false;
    },
    // 取消按钮
    cancelResume() {
      this.resumeForm = {
        startDate: '',
        endDate: '',
        post: '',
        company: ''
      }
      this.resumeOpen = false;
    },
    // 表单重置
    reset() {
      this.form = {
        userInfoId: null,
        userId: null,
        idCard: null,
        birthDate: null,
        sex: null,
        delFlag: null,
        remark: null
      };
      this.resetForm("form");
    },
    handleBack() {
      this.$router.push({path: "/kaoshi/shouye"}).catch(() => {
      })
    },
    /** 提交按钮 */
    submitForm() {


      this.$refs["form"].validate((valid, obj) => {
        if (valid) {
          this.form.vocation =this.session.examType
          this.form.vocationText = this.sessionText
          this.form.examTime = this.session.examDate
          addExam(this.form).then(res => {


            this.$cache.local.remove('exam_info_'+this.data.id)
            this.$modal.msgSuccess("报名成功")
            // this.$router.push({path: "/kaoshi/shouye"}).catch(() => {
            // })

          })

        } else {
          let a = [];
          for (let key in obj) {
            a.push(obj[key][0].message);
          }
          this.$modal.alertError(a[0])
          return false;
        }
      });


    },
  }
}
</script>

<style scoped lang="scss">
html, body {
  overscroll-behavior: contain; /* 禁止惯性滚动 */
  height: 100%;
  overflow: hidden; /* 根据实际需求调整 */
}

::-webkit-scrollbar-button {
  display: none; /* 消除下拉箭头 */
}

.kaoshi {
  max-width: 90vw;
  margin: auto;
  touch-action: pan-y;
  display: grid;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
}


::v-deep .el-form-item__label {
  font-size: 18px;
}

.note {
  font-size: 14px;
  margin-left: 10px;
  color: #3a8ee6;
}


</style>

